<template>
  <!-- 账单明细 -->
  <zsearch v-loading="loading">
      <template #title>
        <span>项目明细</span>
      </template>
      <template #date>
        <el-date-picker
          v-model="startTime"
          type="datetime"
          placeholder="选择开始时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          >
        </el-date-picker>

        <el-date-picker
          v-model="endTime"
          type="datetime"
          placeholder="选择结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          >
        </el-date-picker>
      </template>
      <template #select>
        <!-- <el-input class="input-1" v-model="name" placeholder="请输入内容"></el-input> -->
      </template>
      <template #btns>
        <el-button class="btn-1" @click="hanledSearch">查询</el-button>
			  <el-button class="btn-2">导出</el-button>
      </template>
      <template #table>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          height='100%'
          show-summary
          :summary-method="hanledAdd"
          >
            <el-table-column
              width="180"
              v-for="i in columns"
              :prop="i.name"
              :label="i.show">
            </el-table-column>
          </el-table>
        <zpage 
            :currentPage="current" 
            :total="total" 
            @handleSizeChange="handleSizeChange" 
            @handleCurrentChange="handleCurrentChange"
        ></zpage>
      </template>
    </zsearch>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, ref } from '@vue/runtime-core'

import useRequet, { RespData } from "../../hook/network"

import useConfgin from '../../hook/getconfig'
import { getMonth, getCurrentMonthlastDay } from '../../utils/nowDate'

import ztable from '@components/Table/index.vue'
import zpage from '@components/pagination/pagination.vue'
import zsearch from '@components/search/search.vue'

import { ElMessage } from 'element-plus'

const ID = 501
type ColumnType = {
  name: string,
  show: string
}
export default defineComponent({
  name: 'ProjectDetails',
  components: {
    ztable,
    zpage,
    zsearch
  },
  setup() {
    let searchTime = reactive({
      startTime: `${getMonth()}-01 00:00:00`,
      endTime: `${getCurrentMonthlastDay()} 23:59:59`,
    })
    let search = reactive({
      date:'',
      name:'',
      current: 1,
      size: 10,
      total: 0,
    })

    const list = reactive({
      data: [],
      loading: false,
    })
    const tableData = ref([])
    const columns = ref<ColumnType[]>([])

    const request = useRequet({ path: "" });

    const req = () => {
      list.loading = true
      request.sendRequest({
        address: 'statistical/pay/projectDetails', //换项目明细的路径
        params: {
          startTime: searchTime.startTime,
          endTime: searchTime.endTime,
          current: search.current,
          size: search.size
        },
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取失败')
          console.log(resp.data)
          if(resp.data) {
            tableData.value = resp.data.data || []
            columns.value = resp.data.title || []
            search.current = resp.data.page.current
            search.total = resp.data.page.total
          }
          list.loading = false
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取失败')
          console.log(resp, '错误')
        },
        method: "POST",
      })
      list.loading = false
    }
    req()

    //搜索
    const hanledSearch = () => {
      req()
    }

    // 分页
    const handleCurrentChange = (val: number) => {
			search.current = val
      req()
			console.log('handleCurrentChange', val)
		}
    const handleSizeChange = (val: number) => {
      search.size = val
      req()
			console.log('handleSizeChange', val)
		}

    // 处理小数相加问题
    const speed = 10000000000;
    const hanledAdd = (param:any) => {
      const { columns, data } = param
      console.log(data)
      const sums = <string[]>[]
      columns.forEach((column:any, index:number) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        // if(index < 13) {
        //   sums[index] = ''
        //   return
        // }
        const values = data.map((item: any) => Number(item[column.property]))
        
        if (!values.every((value: any) => isNaN(value))) {
          sums[index] = `￥${values.reduce((prev:number, curr: number) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return ((prev * speed) + (curr * speed )) / speed
            } else {
              return Number(prev).toFixed(2)
            }
          }, 0)}`
        } else {
          sums[index] = ''
        }
      })
      
      return sums
    }
    return {
      ...toRefs(list),
      columns,
      ...toRefs(search),
      ...toRefs(searchTime),
      tableData,
      hanledAdd,

      handleCurrentChange,
      handleSizeChange,
      hanledSearch
    }
  }
})
</script>

<style>

</style>